<!-- 
自定义验证码输入、密码输入使用
 
使用方法：
maxlength：输入最大长度
isPwd：是否是密码模式
@finish：回调函数
 <validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode>
 -->
<template>
	<view class="code-area">
		<view class="flex-box">
			<input
				type="number"
				:maxlength="maxlength"
				class="hide-input"
				:value="val"
				@input="getVal"
			/>
			<view v-bind:class="['item', { active: codeIndex == 1 }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 1">*</block>
				<block v-else-if="codeArr[0]==undefined?false:true"> {{ codeArr[0] }}</block>
			</view> 
			<view v-bind:class="['item', { active: codeIndex == 2 }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 2">*</block>
				<block v-else-if="codeArr[1]==undefined?false:true">	{{ codeArr[1] }}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 3 }]">
				<view class="line" ></view>
				<block v-if="isPwd && codeArr.length >= 3">*</block>
				<block v-else-if="codeArr[2]==undefined?false:true">	{{ codeArr[2] }}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 4 }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 4">*</block>
				<block v-else-if="codeArr[3]==undefined?false:true">	{{ codeArr[3] }}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 5 }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 5">*</block>
				<block v-else-if="codeArr[4]==undefined?false:true">	{{ codeArr[4] }}</block>
			</view>
			<view v-bind:class="['item', { active: codeIndex == 6 }]">
				<view class="line"></view>
				<block v-if="isPwd && codeArr.length >= 6">*</block>
				<block v-else-if="codeArr[5]==undefined?false:true">	{{ codeArr[5] }}</block>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//最大长度 值为4或者6
		maxlength: {
			type: Number,
			default: 4
		},
		//是否是密码
		isPwd: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			codeIndex: 1,
			codeArr: [],
			val: ""
		};
	},
	methods: {
		getVal: function(e) {
			var a = e.detail.value;
			this.val = a;
			var n = a.split("");
			this.codeIndex = n.length + 1,
			this.codeArr = n,
			this.codeIndex > Number(this.maxlength) && this.$emit("finish", this.codeArr.join(""))
		},
		clear: function() {
			this.codeIndex = 1,
			this.codeArr = [],
			this.val = ""
		}
	}
};
</script>

<style lang="scss">
.code-area {
	text-align: center;
	.flex-box {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		justify-content: center;
	}

	.item {
		position: relative;
		width: 80upx;
		height: 80upx;
		margin-right: 18upx;
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
		line-height: 80upx;
		box-sizing: border-box;
		border: 2upx solid #cccccc;
	}

	.item:last-child {
		margin-right: 0;
	}

	.active {
		border-color: #ff4b4b;
	}
	.active .line {
		display: block;
	}

	.line {
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 2upx;
		height: 40upx;
		background: #ff4b4b;
		animation: twinkling 1s infinite ease;
	}

	.hide-input {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		text-align: left;
		z-index: 9;
		opacity: 1;
	}

	@keyframes twinkling {
		0% {
			opacity: 0.2;
		}
		50% {
			opacity: 0.5;
		}
		100% {
			opacity: 0.2;
		}
	}
	
	.dot{
		font-size: 80upx;
		line-height: 40upx;
	}
}
</style>
